<template>
    <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'BarChart',
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            const chart = echarts.init(this.$refs.chart);
            const daysInYear = Array.from({ length: 365 }, (_, i) => i + 1);
            const data = daysInYear.map(() => Math.floor(Math.random() * 100));

            // 生成每个月份的颜色数组
            const monthColors = [
                '#3398DB', '#FF6347', '#4682B4', '#FFFF00', '#008000', '#FFA07A',
                '#ADD8E6', '#FF00FF', '#FFD700', '#800080', '#00FFFF', '#DC143C'
            ];

            // 根据月份设置颜色
            const seriesData = data.map((value, index) => {
                const dayOfYear = index + 1; // 第一天是1月1日
                const date = new Date(`2023-01-01`);
                date.setDate(dayOfYear);
                const month = date.getMonth() + 1; // 获取月份
                return {
                    value: value,
                    itemStyle: {
                        color: monthColors[month - 1] // 使用月份对应的索引获取颜色
                    }
                };
            });

            const option = {
                title: {
                    text: '2023年每天数据柱状图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: daysInYear,
                    axisLabel: {
                        interval: 'auto', // 默认情况下只显示月份
                        formatter: value => {
                            const date = new Date(`2023-01-01`);
                            date.setDate(value);
                            return date.getDate() === 1 ? `M${date.getMonth() + 1}` : '';
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 137, // 大约到5月31日（第151天），这里取了一个大约值
                    on: {
                        zoom: function(zoomEvent) {
                            const zoomStart = zoomEvent.start;
                            const zoomEnd = zoomEvent.end;
                            const zoomRange = zoomEnd - zoomStart;
                            const xAxis = option.xAxis;

                            // 根据缩放比例调整标签间隔
                            if (zoomRange < 50) { // 当缩放程度较大时显示详细日期
                                xAxis.axisLabel.interval = 0;
                            } else {
                                xAxis.axisLabel.interval = 'auto';
                            }

                            chart.setOption(option);
                        }
                    }
                },
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 137 // 同上
                }
            ],
                series: [{
                    name: '数据',
                    type: 'bar',
                    data: seriesData,
                    emphasis: {
                        focus: 'series'
                    }
                }]
            };

            chart.setOption(option);

            // 使图表在窗口大小改变时自适应
            window.addEventListener('resize', function () {
                chart.resize();
            });
        }
    }
}; 
</script>
<style scoped></style>
